<template>
  <van-tabbar
    v-model="active"
    active-color="#fc6627"
    inactive-color="#000"
    route
  >
    <van-tabbar-item to="/">
      <span>首页</span>
      <template #icon="{ active }">
        <GeekIcon :name="active ? 'home-sel' : 'home'"></GeekIcon>
        <!-- <van-icon :name="active ? 'wap-home' : 'home-o'" /> -->
      </template>
    </van-tabbar-item>
    <van-tabbar-item to="/question"
      ><span>问答</span>
      <template #icon="{ active }">
        <GeekIcon :name="active ? 'qa-sel' : 'qa'"></GeekIcon>
        <!-- <van-icon :name="active ? 'chat' : 'more-o'" /> -->
      </template>
    </van-tabbar-item>
    <van-tabbar-item icon="friends-o" to="/video"
      ><span>视频</span>
      <template #icon="{ active }">
        <GeekIcon :name="active ? 'video-sel' : 'video'"></GeekIcon>
        <!-- <van-icon :name="active ? 'video' : 'video-o'" /> -->
      </template>
    </van-tabbar-item>
    <van-tabbar-item icon="setting-o" to="/user"
      ><span>我的</span>
      <template #icon="{ active }">
        <GeekIcon :name="active ? 'mine-sel' : 'mine'"></GeekIcon>
        <!-- <van-icon :name="active ? 'manager' : 'manager-o'" /> -->
      </template>
    </van-tabbar-item>
  </van-tabbar>
</template>

<script>
import GeekIcon from './geek-icon.vue'
export default {
  name: 'AppTabbar',
  data () {
    return {
      active: 0
    }
  },
  components: {
    GeekIcon
  }
}
</script>

<style scoped lang="less">
.van-tabbar {
  background: #f7f8fa;
  position: static;
}
::v-deep .van-tabbar-item--active {
  color: #fc6627;
  background-color: #f7f8fa;
}
::v-deep .van-tabbar-item__icon {
  font-size: 20px;
}
::v-deep .van-tabbar-item__text {
  font-size: 10px;
}
</style>
